<template>
  <div class="index-box d-flex" ref="index">
   <!-- <div class="leftBox" :style="{'width': leftTreeShow?'200px':'0px'}">
      <div class="tree-box">
        <el-tree :data="treeList" :props="defaultProps" current-node-key="" node-key="typeId"  default-expand-all @node-click="handleNodeClick" :expand-on-click-node="false"></el-tree>
      </div>
    </div> -->
    <div class="rightBox">
        <div class="table-box" >
         <!-- <div class="search" ref="search">
            <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
              class="demo-form-inline" id="searchBox">
              <el-form-item prop="name">
              	<el-input v-model="searchForm.name" placeholder="请输入banner名称" clearable />
              </el-form-item>
             <el-form-item prop="releaseMessage">
                 <el-input v-model="searchForm.releaseMessage" clearable placeholder="请输入发布人信息" clearable></el-input>
             </el-form-item>
              <el-form-item prop="applyTime">
                <el-date-picker v-model="applyTime" type="daterange" align="right" unlink-panels range-separator="至"
                  start-placeholder="审核开始日期" end-placeholder="审核结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
              <el-form-item prop="status">
              	<el-select v-model="searchForm.status" placeholder="状态" clearable >
              		<el-option label="启用" value="1" /></el-option>
              		<el-option label="禁用" value="2" /></el-option>
              	</el-select>
              </el-form-item>

              <el-form-item>
              	<el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">搜索</el-button>
              	<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
              </el-form-item>

            </el-form>
          </div> -->
          <div class="actionBtn" ref="actionBtn">
            <div class="actionBtnLeft d-flex align-center">
                <MyLeftTreeRetract :leftTreeShow.sync="leftTreeShow"></MyLeftTreeRetract>
                <el-button type="primary" icon="el-icon-add" size="small" @click="handleAdd" v-has="'advertising:advertising:add'">添加广告</el-button>
            </div>
            <div class="actionBtnRight">
                <MyRefresh/>
               <!-- <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet> -->
            </div>
          </div>
          <div class="table" ref="table">
            <el-table :data="dataList" style="width: 100%;" v-loading="loading" border :height="tableHeight"  default-expand-all stripe>
             <el-table-column label="编号" align="center"  type="index" width="100"/>
             <el-table-column prop="name" label="图片" v-if="!hideTableColumn.includes('img')" width="200">
             	<template #default="scope">
             		<el-image :src="scope.row.bannerImage" fit="fill" v-image-preview style="height:80px;"></el-image>
             	</template>
             </el-table-column>
              <el-table-column prop="bannerName" label="广告名称" show-overflow-tooltip align="center"></el-table-column>
             <el-table-column prop="bindLink" label="链接地址" v-if="!hideTableColumn.includes('name')" width="300" show-overflow-tooltip align="center"></el-table-column>
             <!-- <el-table-column prop="appId" label="应用端" v-if="!hideTableColumn.includes('shopName')" width="100" align="center">
               <template #default="scope">
               	<span>{{scope.row.appId=='1'?'微信':(scope.row.appId=='2'?'APP':'PC')}}</span>
               </template>
             </el-table-column> -->
             <el-table-column prop="orderSort" label="排序" v-if="!hideTableColumn.includes('shopType')" align="center"></el-table-column>
             <el-table-column prop="releaseName" label="发布人" v-if="!hideTableColumn.includes('memberType')" align="center">
               <template #default="scope">
               	<p style="margin:0">{{scope.row.createBy}}</p>
               <!-- <p style="margin:0" v-if="scope.row.releaseTelephone">({{scope.row.releaseTelephone}})</p> -->
               </template>
             </el-table-column>
             <!-- <el-table-column prop="modifyDate" label="有效期" v-if="!hideTableColumn.includes('yesime')"  align="center">
               <template slot-scope="scope">
                 <span v-if="scope.row.validityFlag=='1'">长期</span>
                 <span v-if="scope.row.validityFlag=='2'">{{scope.row.validityStartDate}}至{{scope.row.validityEndDate}}</span>
               </template>
             </el-table-column> -->
             <el-table-column prop="modifyDate" label="更新时间" v-if="!hideTableColumn.includes('applyTime')" sortable align="center">
               <template slot-scope="scope">
                 <span>{{ parseTime(scope.row.createTime) }}</span>
               </template>
             </el-table-column>
             <el-table-column label="状态"  v-if="!hideTableColumn.includes('status')" align="center">
               <template #default="scope">
                 <div class="d-flex justify-center">
                   <MySwitch :value.sync="scope.row.bannerStatus" :id="scope.row.bannerStatus" text="启用|禁用"  textValue="1|2" @changeStatus="handleChangeStatus(scope.row)"></MySwitch>
                 </div>
               </template>
             </el-table-column>

             <el-table-column label="操作" align="center" width="200"  fixed="right">
             	<template slot-scope="scope" v-if="scope.row.userId !== 1">
             	<!-- 	<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)"
             			v-has="'advertising:advertising:alter'">修改</el-button> -->
             		<el-button type="text" icon="el-icon-delete" @click="handleDelt(scope.row)">删除</el-button>
             		<!-- <el-button type="text" icon="el-icon-view" @click="handleLook(scope.row)"
             			>查看</el-button> -->
             	</template>
             </el-table-column>
            </el-table>
          </div>
          <div class="page" ref="page">
             <MyPagination
               :total="total"
               :page.sync="searchForm.pageNum"
               :limit.sync="searchForm.pageSize"
               @pagination="dataInfo"
             />

          </div>
        </div>
    </div>


  </div>
</template>

<script>
  import { BdelBanner,BenableOrDisable,BgetBannerList } from '@/api/getData';
  import option from '../../common/option.js';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
     components: { Treeselect },
    data() {
      return {
        loading: false,
        btnLoading: false,
        leftTreeShow: true,
       tableColumn: [],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/

        applyTime:[],
        searchForm: {
          name:'',
          releaseMessage:'',
          appId:'',
          status:'',
          typeId:'',
          pageNum: 1,
          pageSize: 20,
        },
        total: 0,
        treeList: [],
        tableHeight:400,//table 高度
        dataList:[],
        defaultProps: {
           children: 'children',
           label: 'name'
        },
        multipleSelection: '',

      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      //this.getSelect();
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      async dataInfo() {
        try {
          //let data = this.addDateRange(this.searchForm, this.applyTime, 'startTime', 'endTime');
          this.loading = true;
          const result = await BgetBannerList();
          if (result.code == 200) {

            this.dataList = result.data;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      getSelect() {
        this.getCategoryDetails({categoryKey:'advertising_category'})
        .then(res=>{
          this.treeList = [{
            typeId: '',
            children: res.data,
            name: "广告分类",
          }];
        })
      },
      async handleChangeStatus(row) {
        try {
          console.log(row)
          let data = {
            bannerId: row.bannerId,
            bannerStatus: row.bannerStatus
          }
          const result = await BenableOrDisable(data);
          if (result.code == 200) {
            this.$message.success(result.msg);
          } else {
            this.$message.error(result.msg);
            row.bannerStatus = !row.bannerStatus;
          }
        } catch (err) {
          console.log(err)
        }
      },
      handleAdd(){
         this.$router.push({path:'/advertising/addAdvertising',query:{type:'add'}});
      },
      handleEdit(row){
         this.$router.push({path:'/advertising/addAdvertising',query:{bannerId:row.bannerId,type:'edit'}});
      },
      handleLook(row){
        this.$router.push({path:'/advertising/addAdvertising',query:{bannerId:row.bannerId,type:'look'}});
      },
      handleDelt(row){
          this.$confirm('您确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            BdelBanner({bannerId:row.bannerId}).then((result) => {
              if (result.code == '200') {
                   this.dataInfo();
                   this.$message({
                     message: result.msg,
                     type: 'success'
                   });
               }else{
                  this.$message.error(result.msg);
               }
           });
          }).catch(() => {
              console.log(1);
          });
      },
      resetQuery() {
        this.applyTime = [];
        this.auditTime = [];
        this.resetForm("searchForm");
        this.dataInfo();
      },
      handleSearch() {
        this.searchForm.pageNum= 1;
        this.dataInfo();
      },
      /** 树节点点击事件 **/
      handleNodeClick(data){
       this.searchForm.typeId = data.typeId;
       this.searchForm.page = 1;
       this.dataInfo();
      },
    }
  }
</script>

<style scoped lang="scss">
  .index-box{
    padding:0px!important;
    margin-left:0px;
  }
  .tree-box /deep/ .el-tree-node{
     background: #D8E4DD;
  }
  .tree-box> /deep/ .el-tree>.el-tree-node{
    padding:10px;
  }
  .tree-box> /deep/ .el-tree .is-current{
    background:#fff;
  }
  .table-box{
    padding:15px
  }
  .down{
    color: #909399;
    cursor: pointer;
    text-decoration:underline;
  }
  .down:hover{
    color: #a6a9ad;
  }
  .up{
    color:#61997A;
    cursor: pointer;
    text-decoration:underline;
  }
  .up:hover{
    color:#81ad95;
  }
</style>
